<template>
  <div class="lll">
    <mt-header title="订单列表" style="background: #fff" class="o">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
        <mt-button @click="handleClose"></mt-button>
      </router-link>
    </mt-header>
    <mt-navbar v-model="l" class="navbar">
      <mt-tab-item id="1"><span>旧机回收</span></mt-tab-item>
      <mt-tab-item id="2"><span>以旧换新</span></mt-tab-item>
    </mt-navbar>

    <!-- tab-container -->
    <div class="bg">
      <mt-tab-container v-model="l">
        <mt-tab-container-item id="1">
          <router-link
            :to="`/orderdetails/${orderitem.id}`"
            v-for="(orderitem, i) of orderList"
            :key="i"
          >
            <div class="q1">
              <span class="s1">{{ orderitem.submit_date }}</span>
              <span class="s2">{{(orderitem.status_id)==1?"新订单":"订单已取消"}}</span>
              <div class="q2">
                <img src="img/index/iphone.jpeg" alt="" width="" />
                <div class="q3">
                  <h3>{{ orderitem.good_name }}</h3>
                  <p>
                    {{ orderitem.method_id == 1 ? "上门回收" : "邮寄回收" }}
                  </p>
                </div>
              </div>
              <div class="yugu">预估价¥{{ orderitem.money }}</div>
            </div>
          </router-link>
          <div class="jiazai"><a href="#">加载更多</a></div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <!-- <mt-cell v-for="n in 4" :title="'content ' + n" /> -->
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <!-- <mt-cell v-for="n in 6" :title="'content ' + n" /> -->
        </mt-tab-container-item>
        <mt-tab-container-item id="4">
          <!-- <mt-cell v-for="n in 6" :title="'content ' + n" /> -->
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      l: "1",
      uid: "",
      orderList: [],
    };
  },
  mounted() {
    this.uid = window.sessionStorage.getItem("uid");
    this.axios
      .get("/order/orderlist", {
        params: {
          uid: this.uid,
        },
      })
      .then((res) => {
        console.log(res.data);
        if (res.data.code == "200") {
          this.orderList = res.data.data;
          console.log(this.orderList);
        }
      });
  },
};
</script>

<style scoped>
.o {
  font-size: 20px;
  color: #000;
}
a {
  text-decoration: none;
}
.navbar {
  padding: 5px 15px 5px 0px;
}
.navbar span {
  font-size: 15px;
  font-weight: 400;
}
.bg {
  height: 1000px;
  background: #e8e8e8;
}
.bg a {
  display: block;
  color: #000;
}
.q1 {
  position: relative;
  margin: 8px 10px 10px 10px;
  padding-bottom: 20px;
  width: 355px;
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: #fff;
}
.q1 .s1 {
  margin: 10px 0 0 10px;
  float: left;
  font-size: 19px;
  color: darkgray;
}
.q1 .s2 {
  margin: 10px 10px 0 0px;
  float: right;
  font-size: 19px;
  color: red;
  font-weight: 700;
}
.q2 {
  clear: both;
}
.q2 {
  display: flex;
  justify-content: flex-start;
}
.q2 img {
  width: 70px;
  margin: 15px 20px 20px 15px;
}
.q2 .q3 {
  margin: 18px 0 0 0;
}
.q2 .q3 h3 {
  font-weight: 400;
}
.q2 .q3 p {
  color: darkgray;
  margin: 12px 0px;
}
.yugu {
  margin: 10px 0px;
  font-size: 18px;
  position: absolute;
  right: 25px;
  bottom: 15px;
}
.jiazai a {
  margin-top: 20px;
  display: block;
  text-align: center;
  font-size: 18px;
  color: #000;
}
.mint-navbar .mint-tab-item.is-selected {
  color: #000;
  border-width: 0;
}
.mint-tab-item {
  position: relative;
}

</style>